import React,{ Component } from 'react';
import './data-mgt.css';
import { Button, message, Input, Table, Modal,Breadcrumb } from 'antd';
import { Link } from 'react-router-dom';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import LinkButton from '../../components/link-button/linkButton.jsx';
import AddWellForm from '../../components/Modal/add-well-form';
import EditWellForm from '../../components/Modal/edit-well-form';
import {setWorkshop,getWorkshop } from '../../utils/storageUtils';
import { reqDrillListByWsId,reqAddDrill,reqEditDrill,reqDrillIdSearch,reqDeleteDrill } from '../../api';
import editIcon from '../../assets/image/edit.png'
import deleteIcon from '../../assets/image/delete.png'
const { Search } = Input;
const { confirm } = Modal;

class ShowWells extends Component {

  state = {
    drillList:[],
    visible: '0',  
    loading: false,
  }

  handleIdSearch = async(value) => {   // 改为 根据测井编号搜索
    const drill_ws_id = getWorkshop().ws_id;
    const drill_org_id = getWorkshop().ws_pid;
    const drill_id = value;
    //console.log("id搜索井",drill_id,drill_ws_id,drill_org_id)
    const result = await reqDrillIdSearch(drill_id,drill_ws_id,drill_org_id);   // drill_id
    console.log("id搜索井result",result)
    if(result.code === 200){
      const drillList = result.data;
      this.setState({
        drillList
      })
    }else{
      message.error(result.data);
    } 
  };

  initColumns = () => {
    this.columns = [
      { title: '测井编号', dataIndex: 'drill_id', key: 'drill_id',
        sorter: {
          compare: (a,b)=>a.name.localeCompare(b.name),   
        },
      },
      { title: '测井地址', dataIndex: 'drill_address', key: 'drill_address' },
      { title: '联系电话', dataIndex: 'drill_contact', key: 'drill_contact' },
      { title: '备注', dataIndex: 'drill_remark', key: 'drill_remark' },
      {
        title: '操作',
        dataIndex: '',
        key: 'action',
        width: 140,
        render: (wellsInfor) => (
          <span>
            <LinkButton onClick={ () => this.editShow(wellsInfor) }>
              <img src={editIcon} alt="" />
            </LinkButton>
            <LinkButton onClick={ () => this.showDeleteConfirm(wellsInfor) }>
              <img src={deleteIcon} alt="" />
            </LinkButton>  
          </span>
          )   
      },
      {
        title: '测井数据',
        dataIndex: '',
        key: 'dataaction',
        width: 130,
        render: (WellsInfor) =><LinkButton LinkButton onClick={ () => this.enterDataMgt(WellsInfor)}>
          <div className='lookBtn'>
          测井数据管理
          </div>
        </LinkButton>   
      }
    ]
  };

  getDrillList = async() => {   // 根据工区id 获取 测井列表     
    const drill_ws_id = getWorkshop().ws_id;
    const drill_org_id = getWorkshop().ws_pid;
    //console.log("测井参数",drill_ws_id,drill_org_id);
    const result = await reqDrillListByWsId(drill_ws_id,drill_org_id);
    console.log("测井列表",result)
    if(result.code === 200){
      const drillList = result.data;
      this.setState({
        drillList
      }) 
    }else{
      message.error(result.data);
    }
  }

  
  addShow = () => {
    this.setState({
      visible: '1'
    })
  }
  addWellInfor = async() => {  // 添加井    vvvvvvvvvvvvvvvvvvvvv
    this.setState({ visible: '0' });
    const drill_id = this.formRef.current.getFieldValue('drill_id'); 
    const drill_address = this.formRef.current.getFieldValue('drill_address');
    const drill_contact = this.formRef.current.getFieldValue('drill_contact');
    const drill_remark = this.formRef.current.getFieldValue('drill_remark') ? this.formRef.current.getFieldValue('drill_remark') : '';
    const drill_ws_id = getWorkshop().ws_id;
    const drill_org_id = getWorkshop().ws_pid;
    //console.log('新建测井',drill_id,drill_ws_id,drill_org_id,drill_address,drill_contact,drill_remark);
    const result = await reqAddDrill(drill_id,drill_ws_id,drill_org_id,drill_address,drill_contact,drill_remark);
    console.log("新建测井result",result);
    if(result.code === 200){
      message.success("创建成功！");
      // 3、重新获取列表
      this.getDrillList();
    }else{
      message.error(result.data);
    }
  }

  editShow = (wellsInfor) => {
    this.wellsInfor = wellsInfor;
    this.setState({
      visible: '2'
    })
  }
  editWellInfor = async(wellsInfor) => {   // 编辑测井   
    this.setState({ visible: '0' });
    const drill_id = wellsInfor.drill_id; 
    const drill_address = this.formRef.current.getFieldValue('drill_address');
    const drill_contact = this.formRef.current.getFieldValue('drill_contact');
    const drill_remark = this.formRef.current.getFieldValue('drill_remark');
    const drill_ws_id = getWorkshop().ws_id;
    const drill_org_id = getWorkshop().ws_pid;
    //console.log('编辑测井',drill_id,drill_ws_id,drill_org_id,drill_address,drill_contact,drill_remark);
    const result = await reqEditDrill(drill_id,drill_ws_id,drill_org_id,drill_address,drill_contact,drill_remark);
    console.log("编辑测井result",result);
    if(result.code === 200){
      message.success("修改成功！");
      // 3、重新获取列表
      this.getDrillList();
    }else{
      message.error(result.data);
    }
  };


   // 对话框取消按钮
  handleCancel = () => {
    this.setState({
      visible: '0'
    })
  }

  handleDeleteOnOk = async(wellsInfor) => {  // 删除onOk    vvvvvvvvvvvv
    this.setState({
      visible: '0'
    })
    const drill_id = wellsInfor.drill_id;
    const drill_ws_id = getWorkshop().ws_id;
    const drill_org_id = getWorkshop().ws_pid;
    const result = await reqDeleteDrill(drill_id,drill_ws_id,drill_org_id);  
    if(result.code === 200){
      message.success("井已删除！");
      this.getDrillList();
    }   
   };

  showDeleteConfirm = (wellsInfor) => {   // 删除响应函数
    confirm({
      title: '您确定要删除该测井吗?',
      icon: <ExclamationCircleOutlined />,
      okText: '删除',
      okType: 'danger',
      cancelText: '取消',
      onOk: () => this.handleDeleteOnOk(wellsInfor)  
    })
 };

  enterDataMgt = (wellsInfor) => {
    this.props.history.push({pathname:"/data-mgt/showData",state:{wells:wellsInfor}});  
  }

  componentWillMount() {
    this.initColumns();
  }

  componentDidMount() {
    this.getDrillList();
  };

  render() {
    const { visible,loading,drillList } = this.state;
    const { location } = this.props;
    const wellsInfor = this.wellsInfor || {};
    let workshopNameLable;
    if(location.state && location.state.workshop){
      workshopNameLable = location.state.workshop.ws_name;
      // wsId = location.state.workshop.ws_id;
      // setWorkshop({workshopNameLable,wsId});
      setWorkshop(this.props.location.state.workshop);
    }else{
      workshopNameLable = getWorkshop().ws_name;        //workshopNameLable;
    } 
  

    return (
      <div className='data-mgt-wrapper'>
        <div className='data-mgt-header'>
        <div>
        <span className='data-header-search-label'>测井编号：</span>
          <Search
            className='data-header-search'
            placeholder="根据测井编号搜索"
            enterButton="搜索"
            size="middle"
            onSearch={(value) => this.handleIdSearch(value)}
          />
          <Button type="primary" className='data-header-add' onClick={this.addShow}>新建测井</Button>
        </div>
          <Breadcrumb separator=">" className="data-mgt-breadcrumb">
            <Breadcrumb.Item ><Link to="/data-mgt">数据管理</Link></Breadcrumb.Item>
            <Breadcrumb.Item >{workshopNameLable}</Breadcrumb.Item>
          </Breadcrumb>
          
        </div>
        <div className='data-mgt-content'>
          <Table
            columns={this.columns}
            dataSource={drillList}    //drillList
            size='middle'
            loading={loading}   
            pagination={false}
            locale = {{
              cancelSort:'点击取消排序',
              triggerAsc:'点击升序',
              triggerDesc:'点击降序'
            }}
          />

          <Modal
            title="创建测井"
            visible={visible === '1'}
            onOk={this.addWellInfor}
            onCancel={this.handleCancel}
            okText="确定"
            cancelText="取消"
            destroyOnClose={true}
          >
            <AddWellForm setForm = {(formRef) => {this.formRef = formRef}} />  
          </Modal>

          <Modal
            title="编辑测井信息"
            visible={visible === '2'}
            onOk={() => this.editWellInfor(wellsInfor)}
            onCancel={this.handleCancel}
            okText="确定"
            cancelText="取消"
            destroyOnClose={true}
          >
            <EditWellForm 
              drillId = {wellsInfor.drill_id}
              drillAddress = {wellsInfor.drill_address}
              drillContact = {wellsInfor.drill_contact}   
              drillRemark = {wellsInfor.drill_remark}
              setForm = {(formRef) => {this.formRef = formRef}}  // 获取 子组件 传递过来的user对象参数
            />
          </Modal>
        </div>
      </div>
    )
  }
}

export default ShowWells;   